<template>
	<view class="container">
		<!-- <view class="tbs">
			<view class="item" :class="{'active':data.code}" @click="data.code=true">
				团队成员(人)
			</view>
			<view class="item" :class="{'active':!data.code}" @click="data.code=false">
				团队销售额(元)
			</view>
		</view> -->
		<view class="">
			团队业绩:{{data.userInfo.team_money}}
		</view>
		<view class="">
			团队人数:{{data.userInfo.team_number}}
		</view>
		<view class="header" v-if="false">
			<view class="headerT">
				<view class="headerT1">{{data.code?data.userInfo.team_number:$toFiexd(data.userInfo.total_team_money,2)}}</view>
				<view class="headerT2"> {{data.code?'团队总数':'总销售额'}}</view>
			</view>
			<view class="headerB">
				<view class="headerB1" v-if="data.code">
					<view class="item">
						<view class="item1">今日</view>
						<view class="item2">{{data.info.today}}</view>
					</view>
					<view class="item">
						<view class="item1">本月</view>
						<view class="item2">{{data.info.month}}</view>
					</view>
				</view>
				<view class="headerB1" v-else>
					<view class="item">
						<view class="item1">我的销售额</view>
						<view class="item2">{{data.code?data.userInfo.team_number:$toFiexd(data.userInfo.person_money,2)}}</view>
					</view>
					<view class="item">
						<view class="item1">团队销售额</view>
						<view class="item2">{{data.code?data.userInfo.team_number:$toFiexd(data.userInfo.team_money,2)}}</view>
					</view>
				</view>
<!-- 				<view class="headerB2">
					我的邀请人：<text>MDGHJ小开始看</text>
				</view> -->
			</view>
		</view>
		<view class="content">
			<view class="contenttitle">
				团队成员
			</view>
			<view class="list">
				<view v-for="(item,index) in data.teamlist" :key="item.ID">
					<view class="item">
						<view class="left">
							<view class="head">
								<image :src="item.head?item.head:$defaultAvatar" mode=""></image>
							</view>
							<view class="info">
								<view class="name">
									{{item.nickname?item.nickname:'还没有设置昵称'}}
								</view>
								<view class="level">
									{{item.person_money>0?'消费用户':'普通用户'}}
								</view>
							</view>
						</view>
						<view class="right">
							<text>{{item.mobile}}</text>
							<view>个人业绩:{{item.person_money}}</view>
							<view class="">
								团队业绩:{{item.team_money}}
							</view>
							<view class="">权益值:{{item.rights}}</view>
							<view class="">贡献值:{{item.contribution}}</view>

						</view>
					</view>
					<view class="line" v-if="index<data.teamlist.length-1"></view>
				</view>
				<view class="" v-if="data.teamlist.length==0">
					<image src="https://img.fubaozx.cn/static/oldImg/1699508832874.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		code: true,
		teamlist:[],
		userInfo:{},
		info:{}
	})
	onLoad((option) => {})
	onShow(() => {
		shopClassList()
		data.userInfo=uni.getStorageSync('userInfo')
	})
	onPullDownRefresh(() => {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		console.log('onReachBottom')
	})

	function shopClassList() {
		proxy.$request({
			url: `api/team/`,
			method: 'get',
			success(res) {
				data.teamlist=res.data.team_list
				data.info=res.data

			}
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30upx;

		.tbs {
			border: 2upx solid $color1;
			border-radius: 40upx;
			overflow: hidden;
			display: flex;
			font-size: 28upx;
			font-weight: bold;
			text-align: center;
			line-height: 80upx;

			.item {
				background-color: #FFF;
				width: 50%;
				height: 80upx;
				color: $color1 ;

			}

			.active {
				background-color: $color1 ;
				width: 50%;
				height: 80upx;
				color: #FFF;
			}
		}

		.header {
			height: 400upx;
			border-radius: 20upx;
			margin-top: 30upx;
			background-image: url('https://img.fubaozx.cn/static/oldImg/16995088604246.png');
			background-repeat: no-repeat;
			background-size: 100%;
			color: #FFF;

			.headerT {
				height: 170upx;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				border-bottom: 1upx dashed #e3e3e3;
				width: 90%;
				margin: 0 auto;

				.headerT1 {
					font-size: 60upx;
					font-weight: bold;
				}

				.headerT2 {
					font-size: 24upx;
					margin-bottom: 20upx;
				}
			}

			.headerB {
				.headerB1 {
					display: flex;
					justify-content: space-around;
					text-align: center;
					.item {
						margin: 30upx;

						.item1 {
							font-size: 24upx;
						}

						.item2 {
							font-size: 40upx;
							font-weight: bold;
							margin-top: 10upx;
						}
					}
				}

				.headerB2 {
					font-size: 28upx;
					text-align: center;
					color: #e6e6e6;

					text {
						color: #fff;
						font-weight: bold;
					}
				}
			}
		}

		.content {
			padding: 30upx;
			background-color: #FFF;
			border-radius: 16rpx;
			margin-top: 30upx;
			.contenttitle{
				font-size: 32upx;
				font-weight: bold;
				margin-bottom: 30upx;
			}
			.list{
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						display: flex;
						.head{
							width: 88upx;
							height: 88upx;
							border-radius: 50%;
							overflow: hidden;
							image{
								width: 88upx;
								height: 88upx;
							}
						}
						.info{
							margin-left: 20upx;
							.name{
								font-size: 32upx;
								font-weight: bold;
							}
							.level{
								font-size: 24upx;
								color:#ACB4CC;
							}
						}
					}
					.right{
						font-size: 24upx;
						color:#ACB4CC;
						text-align: right;
						text{
							margin-left: 10upx;
							font-size: 32upx;
							font-weight: bold;
							color:#333;
						}
					}
				}
			}
		}
	}
</style>
